<template>
  <view>
           <view class="box-top" v-for="(item,i) in dataList" :key="i">
            <view class="left-box-top" v-if="leftShow" > <!-- 左边 -->
				<view class="leftbox_time" :style="{color:item.defertType === 4 ? '#e02020;':''}" v-if="item.defertPlanDate">{{item.defertPlanDate.substring(0,10).replaceAll('-','/')}}</view>
				<view class="leftbox_time" v-if="item.defertType === 0">{{item.planDate.substring(0,10).replaceAll('-','/')}}</view>
				
				<view class="leftbox_gree" v-if="item.defertType === 1">{{'相对提前'+item.defertDays+'天'}}</view>
				<view class="leftbox_red" v-else-if="item.defertType !== 0 && item.defertType !== 1">{{'相对延期'+item.defertDays+'天'}}</view>
			</view>
            <view class="line" :class="{none:i==(dataList.length-1)}"><!-- 中线 -->
                <!-- 圆点 -->
				<!-- <view  v-if="item.status === 4 || item.status === 6 " class="dotpuls"  ></view>
				<view v-else class="dot"></view> -->
				<view v-if="i === 0"class="dotpulsImg" >
					<image v-if="item.defertType === 4" src="/static/images/maintain/maintainTimeRed.png" mode=""></image>
					<image v-else src="/static/images/maintain/maintainTime.png" mode=""></image>
				</view>
                <view :class="item.defertType === 4?'dotRed':'dot'" v-else></view>
            </view>
            <view class="right-box-top"> <!-- 右边 -->
                <view class="actTit leftAct">
                   <text class="leftAct_name" :style="{color:item.defertType === 4 ? '#e02020;':''}">{{item.defertTypeName}}</text> 
				   <text class="leftAct_text" v-if="item.defertDesc" style="cursor: pointer;" @click="seeClick(item,1)" >调整原因</text> 
				   <text
				   class="leftAct_text"
				   style="cursor: pointer;" 
				   @click="seeClick(item,2)"
				    v-if="item.defertImg"
				    > 调整证明</text> 
                </view>
				<view class="actTit actImg" style="padding:12rpx 0;" v-if="item.createTime" >
					<image src="@/static/images/maintain/times.png" mode=""></image>
					<text>{{item.createTime.replaceAll('-','/')}}</text> 
					<text style="margin-left: 5rpx;">{{item.createUserName}}</text> 
				</view>
             
            </view>
        </view>
    
  </view>
</template>

<script>
export default {
	data() {
		return {
          
		};
	},
	props:{
		dataList:{
			type:Array,
			default:[]
		},
		statusShow:{
			type:Boolean,
			default:true
		},
		leftShow:{// 左侧显示
			type:Boolean,
			default:false
		}
	},
	mounted() {
		
	},
	methods:{
		seeClick(obj,type) {
			this.$emit('seeClick',obj,type);
		},
		seeAddressClick(obj) {
			uni.openLocation({
				latitude: parseFloat(obj.latitude),
				longitude: parseFloat(obj.longitude),
				name: obj.buildingName,
				address: obj.buildingAddress,
				scale: 18,
				complete: e => {
					console.log(e);
				},
				success(e) {}
			});
			this.$emit('seeAddressClick',obj);
		},
		
		strLenght(val) {
			if (val.length > 10) {
				return val.substring(0, 10) + '...';
			}
			return val;
		},
	}
};
</script>

<style lang="scss" scoped>
    .box-top{
        // margin-top: 30px;
        
        width: 100%;
        // min-height: 120px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        font-size: 28rpx;
        .left-box-top{
            width: 160rpx;
            text-align: left;
            font-size: 28rpx;
            font-weight: 500;
            // color: #0091ff;
			margin-left: 30rpx;
			.leftbox_time{
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
			}
			.leftbox_gree{
				font-size: 24rpx;
				font-weight: 400;
				color: #459600;
				background: #e9f9db;
				border-radius: 4rpx;
				text-align: center;
			}
			.leftbox_red{
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #E02020;
				background: #ffe3e3;
				border-radius: 4rpx;
			}
			
        }
        .line{
            width: 2rpx;
            background-color: rgba(228,231,237,1);
            margin: 0 30rpx 0 20rpx;
            // padding: 10px 0 10px 0;
            .dot{
                width: 12rpx;
                height: 12rpx;
                background: #0091ff;
                border: 2rpx #0091ff solid;
                border-radius: 50%;
                position: relative;
                left: -8rpx;
            }
			.dotRed{
				width: 12rpx;
				height: 12rpx;
				background: #e02020;
				border: 2rpx #e02020 solid;
				border-radius: 50%;
				position: relative;
				left: -8rpx;
			}
            .dotpuls{
                width: 60rpx;
                height: 60rpx;
                position: relative;
                left: -16rpx;
                top:-20rpx;
                line-height: 60rpx;
            }
			.dotpulsImg{
			    width: 60rpx;
			    height:60rpx;
			    position: relative;
			    left: -18rpx;
			    top:-6rpx;
			    // line-height: 60rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					background: #FFFFFF;
				}
			}
            .dotpuls:before{
                content: '';
                width: 30rpx;
                height: 30rpx;
                border: 2rpx solid #0091ff;
                background:#0091ff;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
            }
            .dotpuls:after{
                content: '';
                width: 17rpx;
                height:10rpx;
                border: 2rpx solid #FFFFFF;
                border-top: transparent;
                border-right: transparent;
                text-align: center;
                display: block;
                position: absolute;
                top: 24rpx;
                left:9rpx; 
                transform: rotate(-65deg);
            }
        }
        .right-box-top{
            flex: 1;
            padding: 0 0 40rpx 0;
            font-size: 28rpx;
            font-weight: 500;
            color: #999999;
            // margin-top: -8px;
            .see{
                font-size: 28rpx;
                font-weight: 400;
                color: #0091ff;
                text{
                    display: inline-block;
                    margin: 0 10rpx 0 10rpx;
                    width: 30rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    border-bottom: 2rpx #0091ff solid;
                    border-right: 2rpx #0091ff solid;
                    transform: rotate(-45deg);
                }
            }
            .actTit{
                font-size: 28rpx;
                font-weight: 400;
                color: #999999;
                // height: 30rpx;
                text{

                }
            }
			.actImg{
				
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 7rpx;
					vertical-align: top;
					margin-bottom: 5rpx;
					margin-top: 7rpx;
					display: inline-block;
				}
				text{
					display: inline-block;
				}
				.acTaddress{
					display: inline-block;
					width: 450rpx;
					
				}
			}
            .leftAct{
                height: 30rpx;
                font-size: 28rpx;
                line-height: 1;
                margin-bottom: 10rpx;
                text{display: inline-block;}
				.leftAct_name{
					color: #333333;
					font-weight: 400;
					margin-left: 10rpx;
				}
				.leftAct_text{
					color: #0091ff;
					float: right;
					margin-right: 20rpx;
				}
                
            }
            .content{
                margin: 20rpx 0 20rpx 0;
            }

        }
    }
    .activeTit{
        font-size: 56rpx;
        font-weight: 600;
        color: #333333;
    }

    .active{
        background-color: rgba(44,143,233,1) !important;
    }
    .none{
        background-color: rgba(0,0,0,0) !important;
    }
</style>
